<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2021/12/4
  Time: 0:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理员界面</title>
    <link rel="stylesheet" type="text/css" href="/bookstoreOnline/static/bootstrap-4.6.0/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/bookstoreOnline/static/bootstrap-table/bootstrap-table.css"/>
    <link rel="stylesheet" type="text/css" href="/bookstoreOnline/static/css/admin.css"/>
</head>
<body>
<div class="main-warp">
    <nav class="navbar navbar-expand-lg navbar-light bg-light my-nav">
        <a class="navbar-brand" href="#">图书系统后台管理界面</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
            </ul>
            <a href="javascript:(0)"  onclick="quit()" class="text-danger" style="font-size: 18px;">退出登录</a>
        </div>
    </nav>
    <div class="down-warp">
        <nav aria-label="breadcrumb" class="my-bnav">
            <ol class="breadcrumb m-3 my-breadcrumb">
                <li class="breadcrumb-item" value="1">图书管理</li>
                <li class="breadcrumb-item" value="2"><a href="#">分类管理</a></li>
                <li class="breadcrumb-item" value="3"><a href="#">订单管理</a></li>
                <li class="breadcrumb-item" value="4"><a href="#">用户管理</a></li>
            </ol>
        </nav>
        <div class="operate-warp">
            <div class="book-manage-warp" style="width: 1200px;margin: 0 auto;display: block;">
                <div id="book-manage-toolbar">
                    <button type="button" class="btn btn-primary" onclick="refresh()">刷新</button>
                    <button type="button" class="btn btn-success" onclick="book_manage_op(0,'start-modal')"
                            data-toggle="modal"
                            data-target="#book-manage-add-modal">添加图书
                    </button>
                </div>
                <table id="book-mannage-table">

                </table>
            </div>
            <div class="category-manage-warp" style="width: 1200px;margin: 0 auto;display: none;">
                <div id="category-manage-toolbar">
                    <button type="button" class="btn btn-primary" onclick="category_manage_op(0,'refresh')">刷新</button>
                    <button type="button" class="btn btn-success" onclick="category_manage_op(0,'start-modal')"
                            data-toggle="modal"
                            data-target="#category-manage-add-modal">添加分类
                    </button>
                </div>
                <table id="category-mannage-table">

                </table>
            </div>
            <div class="order-manage-warp" style="width: 1200px;margin: 0 auto;display: none;">
                <div id="order-manage-toolbar">
                    <button type="button" class="btn btn-primary" onclick="order_manage_op(0,'refresh')">刷新</button>
                </div>
                <table id="order-manage-table">

                </table>
            </div>
            <div class="user-manage-warp" style="width: 1200px;margin: 0 auto;display: none;">
                <div id="user-manage-toolbar">
                    <button type="button" class="btn btn-primary" onclick="user_manage_op(0,'refresh')">刷新</button>
                    <button type="button" class="btn btn-success" onclick="user_manage_op(0,'start-modal')"
                            data-toggle="modal"
                            data-target="#user-manage-add-modal">添加用户
                    </button>
                </div>
                <table id="user-manage-table">

                </table>
            </div>
        </div>
    </div>
</div>
<!-- 添加书本信息模态框 -->
<div class="modal fade" id="book-manage-add-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="">添加图书</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body book-manage-add-modal-body">
                <form>
                    <div class="form-group">
                        <label for="b-name-add">书本名</label>
                        <input type="text" class="form-control" id="b-name-add">
                    </div>
                    <div class="form-group">
                        <label for="author-add">书本作者</label>
                        <input type="text" class="form-control" id="author-add">
                    </div>
                    <div class="form-group">
                        <label for="price-add">书本价格</label>
                        <input type="text" onkeyup="if(event.keyCode !=37 && event.keyCode != 39)value=value.replace(/\D/g,'')" class="form-control" id="price-add">
                    </div>
                    <form>
                        <div class="form-group">
                            <label for="image-add">上传书本图片</label>
                            <input type="file" accept="image/jpeg" class="form-control-file" id="image-add" onchange="show_img(this)">
                            <!-- TODO 显示上传的图片 -->
                            <img id="image-add-show" src="" style="width: 50%;height: 50%">
                        </div>
                    </form>
                    <div class="form-group">
                        <label for="description-add">书本描述</label>
                        <textarea class="form-control" id="description-add" rows="3"></textarea>
                    </div>
                    <!-- 选择分类 -->
                    <div class="form-group">
                        <label for="category-add">选择所属分类</label>
                        <select class="form-control" id="category-add">

                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer book-manage-add-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="book_manage_op(0,'add')">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 添加分类信息模态框 -->
<div class="modal fade" id="category-manage-add-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">添加分类</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body category-manage-add-modal-body">
                <form>
                    <div class="form-group">
                        <label for="c-name-add">分类名</label>
                        <input type="text" class="form-control" id="c-name-add">
                    </div>
                    <div class="form-group">
                        <label for="c_description-add">分类描述</label>
                        <textarea class="form-control" id="c_description-add" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer category-manage-add-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="category_manage_op(0,'add')">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 订单详细信息模态框 -->
<div class="modal fade" id="order-detail-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="order-detail-modal-title">订单详细信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body order-detail-modal-body">
                <table id="order-detail-table">

                </table>
            </div>
            <div class="modal-footer order-detail-modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 添加用户模态框 -->
<div class="modal fade" id="user-manage-add-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="user-manage-add-modal-title">添加用户</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body user-manage-add-modal-body">
                <form>
                    <div class="form-group">
                        <label for="b-name-add">用户名</label>
                        <input type="text" class="form-control" id="u-name-add">
                    </div>
                    <div class="form-group">
                        <label for="b-name-add">密码</label>
                        <input type="password" class="form-control" id="pwd-add">
                    </div>
                    <div class="form-group">
                        <label for="b-name-add">确认密码</label>
                        <input type="password" class="form-control" id="con-pwd-add">
                    </div>
                    <div class="form-group">
                        <label for="b-name-add">邮箱</label>
                        <input type="text" class="form-control" id="email-add">
                    </div>
                    <div class="form-group">
                        <label for="b-name-add">座机号码</label>
                        <input type="text" class="form-control" id="cellphone-add">
                    </div>
                    <div class="form-group">
                        <label for="b-name-add">手机号码</label>
                        <input type="text" class="form-control" id="mobilephone-add">
                    </div>
                    <div class="form-group">
                        <label for="b-name-add">地址</label>
                        <input type="text" class="form-control" id="address-add">
                    </div>
                </form>
            </div>
            <div class="modal-footer user-manage-add-modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="user_manage_op(0,'add')">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 书本详细信息模态框 -->
<div class="modal fade" id="book-detail-modal" tabindex="-1"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="book-detail-modal-title">详细信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body book-detail-modal-body">
                <div style="width: 100%;">
                    <div style="margin: 0 auto;text-align: center;">
                        <img style="max-width: 50%;max-height: 50%;" src="/staticFilepath/img/book/0568bb86-a073-48c5-93bd-14a4c48fbddd.jpg" alt="">
                    </div>
                    </div>
                <div class="mt-3">
                    <h3>书名：C++从入门到精通</h3>
                </div>
                <p>作者：我不认识</p>
                <p>价格：100元</p>
                <p>描述：一本非菲菲常好的书</p>
            </div>
            <div class="modal-footer book-detail-modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 更新书本信息模态框 -->
<div class="modal fade" id="book-manage-modify-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modify">修改图书信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body book-manage-modify-modal-body">
                <form>
                    <div class="form-group">
                        <label for="b-name-modify">书本名</label>
                        <input type="text" class="form-control" id="b-name-modify">
                    </div>
                    <div class="form-group">
                        <label for="author-modify">书本作者</label>
                        <input type="text" class="form-control" id="author-modify">
                    </div>
                    <div class="form-group">
                        <label for="price-modify">书本价格</label>
                        <input type="text" onkeyup="if(event.keyCode !=37 && event.keyCode != 39)value=value.replace(/\D/g,'')" class="form-control" id="price-modify">
                    </div>
                    <form>
                        <div class="form-group">
                            <label for="image-modify">上传书本图片</label>
                            <input type="file" accept="image/jpeg" class="form-control-file" id="image-modify">
                            <!-- TODO 显示上传的图片 -->
                        </div>
                    </form>
                    <div class="form-group">
                        <label for="description-modify">书本描述</label>
                        <textarea class="form-control" id="description-modify" rows="3"></textarea>
                    </div>
                    <!-- 选择分类 -->
                    <div class="form-group">
                        <label for="category-modify">选择所属分类</label>
                        <select class="form-control" id="category-modify">

                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer book-manage-modify-footer">

            </div>
        </div>
    </div>
</div>
<!-- 更新分类信息模态框 -->
<div class="modal fade" id="category-manage-modify-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">更新分类</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body category-manage-modify-modal-body">
                <form>
                    <div class="form-group">
                        <label for="c-name-modify">分类名</label>
                        <input type="text" class="form-control" id="c-name-modify">
                    </div>
                    <div class="form-group">
                        <label for="c_description-modify">分类描述</label>
                        <textarea class="form-control" id="c_description-modify" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer category-manage-modify-footer">

            </div>
        </div>
    </div>
</div>
</body>
<script src="/bookstoreOnline/static/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script src="/bookstoreOnline/static/bootstrap-4.6.0/js/bootstrap.js" type="module" charset="utf-8"></script>
<script src="/bookstoreOnline/static/bootstrap-table/bootstrap-table.js" type="module" charset="utf-8"></script>
<script src="/bookstoreOnline/static/bootstrap-table/locale/bootstrap-table-zh-CN.js" type="module" charset="utf-8"></script>
<script src="/bookstoreOnline/static/js/admin.js" type="text/javascript" charset="utf-8"></script>
</html>
